<template>
  <div class="header">
    <!-- 当点击时显示侧边栏 -->
    <ToggleSidebar :color="color" />
    <!--  -->
    <router-link to="/cv/plaza">
      <p @click="fun()">发现</p>
    </router-link>
    <router-link to="/cv/songhome">
      <p @click="fun1()">歌房</p>
    </router-link>
    <div class="right">
      <i v-if="show" class="iconfont icon-icon_alive"></i>
      <i v-if="show1" class="iconfont icon-denglu"></i>
      <i v-if="show1" class="iconfont icon-016fangdajing"></i>
    </div>
    <div class="xiahuaxian" ref="xia"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      show1: false,
      color:
        "display: inline-block; font-size: 0.42rem width:auto;height:auto;background-color: #f6f6f6;",
    };
  },
  created() {},
  computed: {},
  methods: {
    fun() {
      this.$refs.xia.style.left = "2.2rem";
      this.show = true;
      this.show1 = false;
    },
    fun1() {
      this.$refs.xia.style.left = "4.14rem";
      this.show = false;
      this.show1 = true;
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.28rem;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  padding: 0.26rem 0.12rem 0.32rem 0.3rem;
  background-color: #f6f6f6;
  z-index: 9999;
  i::before {
    font-size: 0.42rem;
    margin-right: 0.3rem;
  }
  p {
    font-size: 0.35rem;
    line-height: 1rem;
    color: #000;
  }
  .right {
    width: 1.3rem;
    display: flex;
    flex-direction: row-reverse;
  }
  .xiahuaxian {
    width: 0.7rem;
    border-top: 0.1rem solid #fe3a3b;
    position: absolute;
    bottom: 0.38rem;
    left: 2.2rem;
    transition: all 0.3s;
  }
  /deep/ .sidebar {
    /deep/ .van-cell {
      background-color: #f6f6f6;
    }
  }
}
</style>